<template>
  <div class="form">
    <section>
      <div class="model-title">
        <h4>撤回变更商标申请人/注册名义/地址/变更集体商标证明商标管理规则/集体成员名单申请</h4>
      </div>
      <el-form
        align="left"
        ref="organization"
        :model="organization"
        class="model-form"
        :class="{'model-form-abel': editable}"
        label-width="200px"
        size="small"
      >
        <el-row>
          <el-col>
            <el-form-item label="申请人名义(中文) :">
              <el-input v-if="editable" v-model="organization.appNameCn"></el-input>
              <span v-else>{{organization.busName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="(英文) :">
              <el-input v-if="editable" v-model="organization.appNameEn"></el-input>
              <span v-else>{{organization.appNameEn}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="申请人地址(中文) :">
              <el-input v-if="editable" v-model="organization.appAddCn"></el-input>
              <span v-else>{{organization.busAddress}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="(英文) :">
              <el-input v-if="editable" v-model="organization.appAddEn"></el-input>
              <span v-else>{{organization.appAddEn}}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="邮政编码 :">
              <el-input v-if="editable" v-model="organization.postCode"></el-input>
              <span v-else>{{organization.postCode}}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="联系人 :">
              <el-input v-if="editable" v-model="organization.contact"></el-input>
              <span v-else>{{organization.contact}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="邮箱 :">
              <el-input v-if="editable" v-model="organization.email"></el-input>
              <span v-else>{{organization.email}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="电话 :">
              <el-input v-if="editable" v-model="organization.phone"></el-input>
              <span v-else>{{organization.phone}}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="商标申请号/注册号 :">
              <el-input v-if="editable" v-model="organization.appNum"></el-input>
              <span v-else>{{organization.appNum}}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="原变更申请号 :">
              <el-input v-if="editable" v-model="organization.registNumOri"></el-input>
              <span v-else>{{organization.registNumOri}}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="是否共有商标 :">
              <el-radio-group v-model="organization.isComm">
                <el-radio :label="1" disabled v-if="organization.isComm == 1">是</el-radio>
                <el-radio :label="0" disabled v-if="organization.isComm == 0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col>
            <el-form-item label="是否共有商标 :">
              <el-input v-if="editable" v-model="organization.isComm"></el-input>
              <span v-else>{{organization.isComm}}</span>
            </el-form-item>
          </el-col>
        </el-row>-->

        <el-row>
          <el-col>
            <el-form-item label="撤回变更管理规则 :">
              <el-radio-group v-model="organization.withdrawalChangeRule">
                <el-radio :label="1" disabled v-if="organization.withdrawalChangeRule == 1">是</el-radio>
                <el-radio :label="0" disabled v-if="organization.withdrawalChangeRule == 0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="撤回变更集体成员名单 :">
              <el-radio-group v-model="organization.withdrawalChangePerson" disabled>
                <el-radio :label="1" disabled v-if="organization.withdrawalChangePerson == 1">是</el-radio>
                <el-radio :label="0" disabled v-if="organization.withdrawalChangePerson == 0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col class="seal-container">
            <el-form-item label="撤回理由 :">
              <el-input type="textarea" v-if="editable" v-model="organization.reasonsWithdrawal"></el-input>
              <span v-else>{{organization.reasonsWithdrawal}}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item class="yyimgLyear" label="营业执照 :">
              <imgshow>
                <img :src="newUrl(organization.busimg)" alt />
              </imgshow>
            </el-form-item>
            <el-form-item
              class="idCardImgBox"
              v-if="organization.idcardimg !== ''"
              label="身份证(正反面) :"
            >
              <imgshow>
                <img style="margin-top:5px;" :src="newUrl(organization.idcardimg)" alt />
              </imgshow>
            </el-form-item>
            <el-form-item style="margin-top:10px" class="yyimgLyear" label="网上确认书 :">
              <imgshow>
                <img :src="newUrl(organization.qrfile)" alt />
              </imgshow>
            </el-form-item>
            <!-- 附件 -->
            <div  v-if="organization.otherfile.length != 0">
                <el-form-item style="margin-top:10px" class="yyimgLyear" label="其他附件 :">
              <imgshow v-for="(item,index) in organization.otherfile" :key="index">
                <img :src="mconfig.host+item" alt />
              </imgshow>
            </el-form-item>
            </div>
           
          </el-col>
        </el-row>
      </el-form>
    </section>

    <!-- 第二部分 -->

    <!-- 第二部分 -->
    <section v-if="other">
      <div class="model-title modelTittwo">
        <h5>
          撤回变更商标申请人/注册人名义/地址
          变更集体商标/证明商标管理规则/集体成员名单申请书
        </h5>
        <p>（附页）</p>
        <p style="font-size:16px;margin-top:40px">原申请变更共有人</p>
      </div>
      <proAppend class="part" :callback="otherPublic"></proAppend>
      <!-- <el-form
        ref="otherPublic"
        class="model-form"
        :class="{'model-form-abel': editable}"
        label-width="120px"
        size="small"
      >
        <div v-for="(item, index) in otherPublic" :key="index">
          <el-row>
            <el-col>
              <el-form-item :label="(index+1) + '.名义(中文) :'">
                <span>{{item.partNameCh}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="(英文) :">
                <span>{{item.partNameEn}}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col>
              <el-form-item label="地址(中文) :">
                <span>{{item.partAddrCh}}</span>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="(英文) :">
                <span>{{item.partAddrEn}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form> -->
    </section>
  </div>
</template>

<script>
import imgshow from "../common/imgshow";
import proAppend from "../common/proAppend"
export default {
  components: {
    imgshow,
    proAppend
  },
  name: "Form",
  data() {
    return {
      other: false,
      imgShow: true,
      organization: {
        appNameCn: "", // 申请人名义(中文)
        appNameEn: "", // 申请人名义(英文)
        appAddCn: "", // 申请人地址(中文)
        appAddEn: "", // 申请人地址(英文)
        postCode: "", // 邮政编码
        contact: "", // 联系人
        email:"",//电子邮件
        phone: "", // 电话
        appNum: "", // 商标申请号/注册号
        registNumOri: "", // 原变更申请号
        isComm: "", // 是否共有商标: 1:是 0:否
        withdrawalChangePerson: false, // 撤回变更集体成员名单: (1:是)
        withdrawalChangeRule: false, // 撤回变更管理规则: (1:是)
        reasonsWithdrawal: "", // 撤回理由
        idcardimg: "", //身份证地址
        busimg: "", //营业执照
        appliType: "", //证件人类型
        otherfile:[]
      },
      // 其他共有人
      otherPublic: [],
      //其他附件

      editable: false, // 可编辑
    };
  },
  computed: {},

  filters: {
    // 状态过滤器
    subStatusFilter(v) {
      switch (v) {
        case 1:
          return "保存";
          break;
        case 2:
          return "选择通过";
          break;
        case 3:
          return "选择未通过";
          break;
        case 4:
          return "未审核";
          break;
        default:
      }
    },
  },
  mounted() {
    this.newImgStatus();
  },
  methods: {
    newImgStatus() {
      if (this.organization.idcardface || this.organization.idcardimg) {
      } else {
        this.imgShow = false;
      }

    },
    newUrl(_url) {
      //图片地址
      var newURL = this.mconfig.host + _url;
      // console.log(this.mconfig.host)
      return newURL;
    },
    // 提交审核
    lastPage() {
      this.editable = false; // 更改为不可编辑
    },
    // 修改
    modify() {
      this.editable = true; // 更改为可编辑
    },
    // 图片上传成功
    handleAvatarSuccess(res, file) {
      this.organization.imgPath = URL.createObjectURL(file.raw);
    },
    // 初始化数据
    getData() {
      this.$http
        .get("/trademark/proWncaa/findByIdDetl", {
          params: {
            id: this.$route.query.id,
          },
        })
        .then((response) => {
          if (response.data.code == 200) {

            this.organization = response.data.data.data;
            if (response.data.data.append.length > 0){
              this.otherPublic = response.data.data.append;
              this.other = true;
            }
            // if(response.data.data.otherfile.length > 0){
            //    this.otheradj = response.data.data.otherfile;
            // }

            // let resPublic = response.data.data.public;
            // let data = response.data.data.data;

            // this.organization.appNameCn = resPublic.appName; // 申请人名称（中文）
            // this.organization.appNameEn = data.appNameEn; // 申请人名称（英文）
            // this.organization.appAddCn = resPublic.busAddress; // 申请人地址（中文）
            // this.organization.appAddEn = data.appAddEn; // // 申请人地址（英文）
            

            // this.organization.postCode = data.postCode;  //邮政编码
            // this.organization.contact = data.contact;  //联系人
            // this.organization.phone = data.phone;  //电话

            // this.organization.busimg = data.busimg   //营业执照
            // this.organization.idcardface = data.idcardface;  //身份证正反
            // this.organization.idcardimg = data.idcardimg;  //身份证正反
            // this.organization.appNum = data.appNum;    // 商标注册号：
            // this.organization.registNumOri = data.registNumOri;   // 原变更申请号
            // this.organization.isComm = JSON.parse(data.isComm); //  是否共有商标: 1:是0:否
            this.organization.otherfile = JSON.parse(this.organization.otherfile);

            // this.organization.withdrawalChangePerson = !!JSON.parse(data.withdrawalChangePerson); //  撤回变更集体成员名单: (1:是)
            // this.organization.withdrawalChangeRule = !!JSON.parse(data.withdrawalChangeRule); //  撤回变更管理规则: (1:是)

            // this.organization.reasonsWithdrawal = data.reasonsWithdrawal; // 	撤回理由

            // this.organization.idcardimg = resPublic.idcardimg; // 	身份证正面
            // this.organization.busimg = resPublic.busimg; // 	营业执照

            // 共有人...
            // this.otherPublic = data.proAppendJson
          }
        })
        .catch((error) => {});
    },
  },
  created() {
    this.getData();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
/* 模块标题 */

.idCardImg img {
  margin-right: 15px;
  display: inline;
}
.modelTittwo {
  padding-top: 30px;
}
.model-form-fzk {
  margin-left: 129px;
}

.el-form-item {
  margin-bottom: 0;
}
.form .model-form {
  padding-left: 260px;
}
.model-title {
  /* padding: 0 60px; */
  /* text-align: center; */
  padding-left: 300px;
  font-size: 28px;
  color: #666;
  font-weight: 400;
  margin-bottom: 40px;
}
.model-title h4,
.model-title p {
  margin: 10px 0;
}
.model-title p {
  font-size: 20px;
}
.model-title > h4,
.model-title > h5 {
  text-align: left;
  /* padding-left: 300px; */
  font-weight: normal;
}
.model-title > h5 {
  font-size: 20px;
}
.model-title > h4 {
  font-size: 25px;
}
.seal {
  padding: 0 20px;
}
.seal-container {
  min-height: 50px;
}
/* 签字 */
.signature {
  color: #ccc;
}

.el-radio__input .el-radio__inner {
  border-color: #000;
  background: #fff;
}
/* 选中 */
.el-radio__input.is-checked .el-radio__inner {
  border-color: #666;
  background: #666;
}
.el-radio__inner {
  border-radius: 0;
  color: #000;
}
/* 选中 */
.el-radio__input.is-checked + .el-radio__label {
  color: #000;
}
.part{
  margin-left: 240px;
}
</style>
